<template>
  <div class="app-container">
    <!-- 搜索 -->
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick">
      <!-- <template #reward_type="scope">
        <el-select v-model="searchParam[scope.prop]" @change="setSearchParam()" v-bind="scope">
          <template v-for="option in typeList" :key="option.value">
            <el-option :label="option.label" :value="option.value" />
          </template>
      </el-select> -->
    </page-search>

    <!-- 表格 -->
    <PageContent ref="contentRef" :gridOptions="gridOptions" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" @toolbar-click="handleToolbar"
      >
      <template #role="scope">
        <el-text v-if="scope.row.role === 'user'">{{ $t(`label.158`) }}</el-text>
        <el-text v-if="scope.row.role === 'bot'">{{ $t(`label.159`) }}</el-text>
        <el-text v-if="scope.row.role === 'admin'">{{ $t(`label.167`) }}</el-text>
      </template>
      <template #status="scope">
        <el-tag :type="types[scope.row.status]">
          {{ $t(`groupStatus.${scope.row.status}`) }}
        </el-tag>
      </template>
      <template #can_send_group_messages="scope">
        <el-tag type="success" v-if="scope.row.can_send_group_messages">{{ $t(`status.1`) }}</el-tag>
        <el-tag type="danger" v-else>{{ $t(`status.2`) }}</el-tag>
      </template>
      <template #can_message_participants="scope">
        <el-tag type="success" v-if="scope.row.can_message_participants">{{ $t(`status.1`) }}</el-tag>
        <el-tag type="danger" v-else>{{ $t(`status.2`) }}</el-tag>
      </template>
      <template #is_banned="scope">
        <el-tag type="danger" v-if="scope.row.is_banned">{{ $t(`status.1`) }}</el-tag>
        <el-tag type="success" v-else>{{ $t(`status.2`) }}</el-tag>
      </template>
      <template #is_test="scope">
        <el-tag type="primary" v-if="scope.row.user.is_test">{{ $t(`label.106`) }}</el-tag>
        <el-tag type="success" v-else>{{ $t(`label.165`) }}</el-tag>
      </template>
    </PageContent>

    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick" />
    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick" />

    <!-- 自定义弹窗 -->
    <formModal ref="formModalRef" @refresh-table="handleQuery" /> 
  </div>
</template>

<script setup>
import contentConfig from "./config/content";
import searchConfig from "./config/search";
import editModalConfig from "./config/edit";
import addModalConfig from "./config/add";
import usePage from "@/hooks/usePage";
import formModal from './form-modal/index.vue'
import { tableHeightAutoAdjust } from '@/utils/common'

defineOptions({
  name: "serverMember",
  inheritAttrs: false,
});
const { t } = useI18n();

const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick,handleAddClick,handleResetClick,handleEditClick,
  handleSubmitClick, handleExportClick, } = usePage();

const gridOptions = reactive({})
const formModalRef = ref(null)

const handleToolbar = (val,ids) => {
  console.log('ids===>',ids)
  if(ids.length <= 0){
    ElMessage({
      message: t('hint.136'),
      type: 'warning',
    })
    return
  }
  const row = {ids:ids}
  if(val === 'groupMessagesStatus' && formModalRef.value){
    formModalRef.value.initModal({ row, type: 1 });
  }
}

const handleQuery = ()=> {
  handleQueryClick()
}

onMounted(() => {
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
})
</script>

<style></style>